<style>
    .panel {
        width: 1240px;
        margin: auto;
    }

    .contents-senddetail {
        align-items: center;
        margin: 0 auto;
        background: #fff;
        box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.11);
        border-radius: 6px;
        margin-top: 20px;
    }

    .title {
        display: flex;
        padding-top: 30px;
        align-items: center;
        margin-bottom: 29px;
    }

    .title .devider-title {
        margin-left: 30px;
        width: 4px;
        height: 16px;
        background: #1a96ff;
    }

    .title .title-name {
        height: 22px;
        font-size: 18px;
        font-weight: 500;
        color: #333;
        line-height: 22px;
        margin-left: 6px;
    }

    .contents-senddetail .detail-stauts {
        display: flex;
        margin-left: 30px;
        margin-right: 30px;
    }

    .contents-senddetail .detail-type {
        display: flex;
        width: 50%;
    }

    .el-button-group {
        display: inline-block;
        vertical-align: middle;
    }

    .contents-senddetail .detail-type .detail-type-button {
        padding: 0;
        font-size: 14px;
    }

    .contents-senddetail .confirm {
        width: 106px;
        height: 34px;
        font-size: 12px;
        font-weight: 400;
        color: #1f1f1f;
        margin-right: -1px;
    }

    .el-button-group > .el-button:not(:last-child) {
        margin-right: -1px;
    }

    .el-button-group > .el-button:first-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .el-button-group > .el-button {
        float: left;
        position: relative;
    }

    .el-button {
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #fff;
        border: 1px solid #dcdfe6;
        color: #606266;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: 0;
        margin: 0;
        transition: .1s;
        font-weight: 500;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        padding: 12px 20px;
        font-size: 14px;
    }

    .contents-senddetail .detail-operator {
        width: 50%;
        display: flex;
        justify-content: flex-end;
    }

    .nav-tabs {
        border-bottom: 0;
    }

    .el-button-group .el-button:not(:first-child):not(:last-child) {
        border-radius: 0;
    }

    .nav > li > a :last-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-radius: 4px;

    }

    .nav > li > a :first-child {
        border-radius: 4px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .nav > li > a {
        position: relative;
        display: block;
        line-height: 31px;
        padding: 0;
        margin: 0;
        color: #444;
        outline: none;
        border-radius: 0px;
    }

    .nav > li > a:hover, .nav > li > a:active, .nav > li > a:focus {
        color: #444;
        background: none;

    }

    .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
        color: #fff;
        background: #1a96ff;
        border: 1px solid #1a96ff;
        cursor: pointer;
        border-radius: 0px;
    }

    .panel-body {
        padding: 30px;
    }

    table {
        border: 1px solid #ebeef5;
    }

    .table-striped > tbody > tr:nth-of-type(odd) {
        background: none;
        border-collapse: separate;
    }

    td {
        border-right: 1px solid #ebeef5;
        vertical-align: inherit !important;
    }

    .btn-primary, .btn-primary:hover, .btn-primary:focus {
        color: #fff;
        background-color: #1a96ff;
        border-color: #1a96ff;
        width: 120px;
        cursor: pointer;
        outline: none;
    }

    .btn-primary:active:hover, .btn-primary.active:hover, .open > .dropdown-toggle.btn-primary:hover, .btn-primary:active:focus, .btn-primary.active:focus, .open > .dropdown-toggle.btn-primary:focus, .btn-primary:active.focus, .btn-primary.active.focus, .open > .dropdown-toggle.btn-primary.focus {
        color: #fff;
        background-color: #1a96ff;
        border-color: #1a96ff;
        outline: none;
    }

    .form-horizontal .form-group {
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
    }
</style>
<div class="panel panel-default panel-intro">
    <div class="common-content contents-senddetail">
        <div class="title">
            <div class="devider-title"></div>
            <div class="title-name">发送配置</div>
        </div>
        <div class="detail-stauts">
            <div class="detail-type">
                <div class="el-button-group">
                    <ul class="nav nav-tabs">
                        <li class="el-button detail-type-button confirm active"><a href="#tab-wexin"
                                                                                   data-toggle="tab">微信配置</a></li>
                        <li class="el-button detail-type-button confirm "><a href="#tab-shortmessage"
                                                                             data-toggle="tab">短信配置</a></li>


                    </ul>
                </div>
            </div>
        </div>


        <div class="panel-body">
            <div id="myTabContent" class="tab-content">
                <!--@formatter:off-->
                <div class="tab-pane fade active in" id="tab-wexin">
                    <div class="widget-body no-padding">
                        <form id="weixin-form" class="edit-form form-horizontal nice-validator n-default n-bootstrap"
                              role="form">
                            <table class="table table-striped">
                                <tbody>
                                <tr data-favisible="" data-name="name" class="">
                                    <td>公众号APPID</td>
                                    <td>
                                        <div class="row">
                                            <div class="col-sm-8 col-xs-12">
                                                <input type="text" name="appid" value="{$weixn.appid|default=''}"
                                                       class="form-control"
                                                       data-tip="请填写公众号APPID">
                                            </div>
                                            <div class="col-sm-4"></div>
                                        </div>

                                    </td>
                                </tr>
                                <tr data-favisible="" data-name="name" class="">
                                    <td>公众号AppSecret</td>
                                    <td>
                                        <div class="row">
                                            <div class="col-sm-8 col-xs-12">
                                                <input type="text" name="appsecret" class="form-control"
                                                       data-tip="请填写公众号AppSecret" value="{$weixn.appsecret|default=''}">
                                            </div>
                                            <div class="col-sm-4"></div>
                                        </div>

                                    </td>
                                </tr>
                               <!-- <tr data-favisible="" data-name="name" class="">
                                    <td>模板消息版本</td>
                                    <td>
                                        <div class="row">
                                            <div class="col-sm-8 col-xs-12">
                                                <label for="types1"><input id="types1" name="types" type="radio"
                                                                           value="1" {if $weixn.types==1}checked{/if}/>
                                                    旧版</label>
                                                <label for="types2"><input id="types2" name="types" type="radio"
                                                                           value="2" {if $weixn.types==2}checked{/if}/>
                                                    新版</label>
                                                <br>
                                                <br>
                                                因微信服务类目的调整，原模板消息已不能添加，现在采用新的模板消息（原模板消息不受影响）。 <br>
                                                旧版：在2023年8月之前购买的用户，可以使用原来的模板消息。 <br>
                                                新版：在2023年8月之后购买的用户，请选择新版。
                                            </div>
                                            <div class="col-sm-4"></div>
                                        </div>

                                    </td>
                                </tr>-->
                                <tr data-favisible="" data-name="name" class="">
                                    <td>模板消息编号</td>
                                    <td>
                                        <div class="row">
                                            <div class="col-sm-8 col-xs-12">
                                                <input type="text" name="appinfo" class="form-control"
                                                       data-tip="请填写模板消息id" value="{$weixn.appinfo|default=''}">
                                            </div>
                                            <div class="col-sm-4"></div>
                                        </div>

                                    </td>
                                </tr>
                                <tr data-favisible="" data-name="name" class="">
                                    <td>公众号二维码</td>
                                    <td>
                                        <div class="row">
                                            <div class="col-xs-12 col-sm-8 form-group">
                                                <div class="input-group">
                                                    <input id="c-avatar" data-rule="" class="form-control" size="50"
                                                           name="image" type="text" value="{$weixn.image|default=''}">
                                                    <div class="input-group-addon no-border no-padding">
                                        <span><button type="button" id="faupload-avatar"
                                                      class="btn btn-danger faupload"
                                                      data-input-id="c-avatar"
                                                      data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp"
                                                      data-multiple="false" data-preview-id="p-avatar">
                                            <i class="fa fa-upload"></i> 上传
                                        </button></span>
                                                    </div>
                                                    <span class="msg-box n-right" for="c-avatar"></span>
                                                </div>
                                                <ul class="row list-inline faupload-preview" id="p-avatar"></ul>
                                            </div>
                                            <div class="col-sm-4"></div>
                                        </div>

                                    </td>
                                </tr>


                                </tbody>
                            </table>
                            <div class="layer-footer">
                                <input type="hidden" name="name" value="weixin">
                                <button type="button" class="btn btn-primary" data-info="weixin-form">确定</button>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="tab-pane fade " id="tab-shortmessage">
                    <div class="widget-body no-padding">
                        <form id="shortmessage-form"
                              class="edit-form form-horizontal nice-validator n-default n-bootstrap">
                            <table class="table table-striped">
                                <tbody>
                                <tr data-favisible="" data-name="site_accessKeyId" class="">
                                    <td>短信KeyId(阿里)</td>
                                    <td>
                                        <div class="row">
                                            <div class="col-sm-8 col-xs-12">
                                                <input type="text" name="site_accessKeyId"
                                                       value="{$shortmessage.site_accessKeyId|default=''}"
                                                       class="form-control" data-rule="" data-tip="">
                                            </div>
                                            <div class="col-sm-4"></div>
                                        </div>

                                    </td>
                                </tr>
                                <tr data-favisible="" data-name="site_accessKeySecret" class="">
                                    <td>短信Secret(阿里)</td>
                                    <td>
                                        <div class="row">
                                            <div class="col-sm-8 col-xs-12">
                                                <input type="text" name="site_accessKeySecret"
                                                       value="{$shortmessage.site_accessKeySecret|default=''}"
                                                       class="form-control" data-rule="" data-tip="">
                                            </div>
                                            <div class="col-sm-4"></div>
                                        </div>

                                    </td>
                                </tr>
                                <tr data-favisible="" data-name="site_sign_name" class="">
                                    <td>短信签名(阿里)</td>
                                    <td>
                                        <div class="row">
                                            <div class="col-sm-8 col-xs-12">
                                                <input type="text" name="site_sign_name"
                                                       value="{$shortmessage.site_sign_name|default=''}"
                                                       class="form-control" data-rule="" data-tip="">
                                            </div>
                                            <div class="col-sm-4"></div>
                                        </div>

                                    </td>
                                </tr>
                                <tr data-favisible="" data-name="site_notice" class="">
                                    <td>登录验证码短信模板code(阿里)</td>
                                    <td>
                                        <div class="row">
                                            <div class="col-sm-8 col-xs-12">
                                                <input type="text" name="site_notice"
                                                       value="{$shortmessage.site_notice|default=''}"
                                                       class="form-control" data-rule="" data-tip="">
                                            </div>
                                            <div class="col-sm-4"></div>
                                        </div>

                                    </td>
                                </tr>
                                <tr data-favisible="" data-name="site_codes" class="">
                                    <td>工资条通知短信模板code(阿里)</td>
                                    <td>
                                        <div class="row">
                                            <div class="col-sm-8 col-xs-12">
                                                <input type="text" name="site_codes"
                                                       value="{$shortmessage.site_codes|default=''}"
                                                       class="form-control" data-rule="" data-tip="">
                                            </div>
                                            <div class="col-sm-4"></div>
                                        </div>

                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <div class="layer-footer">
                                <input type="hidden" name="name" value="shortmessage">
                                <button type="button" class="btn btn-primary" data-info="shortmessage-form">确定</button>
                            </div>
                        </form>
                    </div>
                </div>
                <!--@formatter:on-->
            </div>
        </div>
    </div>
</div>